<template>
	 <view class="page-container">
		 <view class="form-box">
	    <view class="title">登录</view>
	    <view class="form-item">
	      <input
	        class="input"
	        type="text"
	        placeholder="请输入用户名"
	        v-model="username"/>
	    </view>
	    <view class="form-item">
	      <input
	        class="input"
	        type="password"
	        placeholder="请输入密码"
	        v-model="password"
	        :focus="isPwdfocus"/>
	    </view>
	    <button class="login-btn" @click="handleLogin">登录</button>
	    <navigator url="/pages/components/register/register" class="register-link"
	      >没有账号？去注册</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				      password: '',
				      isPwdfocus: false,
			}
		},
		methods: {
			handleLogin() {
			      if (!this.username || !this.password) {
			        uni.showToast({
			          title: '请输入完整信息',
			          icon: 'none',
			        });
			        return;
			      }
			      if (this.username === 'hyj' && this.password === '123456') {
			        uni.showLoading({
			          title: '登录中...',
			        });
			        setTimeout(() => {
			          uni.hideLoading();
			          uni.showToast({
			            title: '登录成功',
			          });
			          // 实际项目中这里跳转到首页
			          uni.switchTab({
			            url: '/pages/tabBar/tabcompage/tabcompage',
			          });
			        }, 1000);
			      } else {
			        uni.showToast({
			          title: '密码错误, 请重新输入',
			          icon: 'none',
			        });
			        this.password = '';
			        this.isPwdfocus = true;
			      }
			    },
		}
	}
</script>

<style>
.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5; 
  margin: 0;
  padding: 0;
}

.form-box {
    margin: 0 20px; 
    max-width: 350px;
    width: 100%;
    padding: 35px 25px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}
.form-item {
  width: 100%;
  margin-bottom: 20px;
}
.input{
	height: 28px;
	line-height: 28px;
	font-size: 15px;
	flex:1;
	border: 1px solid #ddd;
	border-radius: 1px;
	box-sizing: content-box;
	padding: 5px;
}
.login-btn {
  width: 100%;
  padding: 3px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 10px;
}
.register-link {
  font-size: 14px;
    color: #007aff;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 15px;
}
</style>
